<template>
    <div>
        <ul class="ul">
            <li style="font-size:0.3rem">
                精选手册
                <span style="margin-left:4.2rem;color:#bababa;font-size:0.24rem">查看更多 ></span>
            </li>
            <li style="margin-top:0.25rem;height: 1.3rem;">
                <img src="../assets/轮播2.png" alt="">
                <div>
                    <p style="font-size:0.26rem">前端开发手册</p>
                    <p style="color:#e3e3e3;font-size:0.2rem;margin-top:0.25rem">2019.12.23</p>
                </div>
                <p>
                    进入
                </p>
            </li>
            <li style="margin-top:0.25rem;height: 1.3rem;">
                <img src="../assets/轮播2.png" alt="">
                <div>
                    <p style="font-size:0.26rem">JAVA开发手册</p>
                    <p style="color:#e3e3e3;font-size:0.2rem;margin-top:0.25rem">2019.12.23</p>
                </div>
                <p>
                    进入
                </p>
            </li>
        </ul>
        <ul class="ul">
            <li style="font-size:0.3rem">
                精选博客
                <span style="margin-left:4.2rem;color:#bababa;font-size:0.24rem">查看更多 ></span>
            </li>
            <li style="margin-top:0.25rem;height: 1.3rem;">
                <img src="../assets/轮播2.png" alt="">
                <div>
                    <p style="font-size:0.26rem">编程学习的五大误区</p>
                    <p style="color:#e3e3e3;font-size:0.2rem;margin-top:0.25rem">2019.12.23</p>
                </div>
                <p>
                    进入
                </p>
            </li>
        </ul>
        <ul class="ul">
            <li style="font-size:0.3rem">
                视频精选
                <span style="margin-left:4.2rem;color:#bababa;font-size:0.24rem">查看更多 ></span>
            </li>
            <li style="margin-top:0.25rem;height: 1.3rem;">
                <img src="../assets/轮播2.png" alt="">
                <div>
                    <p style="font-size:0.26rem">视频</p>
                    <p style="color:#e3e3e3;font-size:0.2rem;margin-top:0.25rem">2019.12.23</p>
                </div>
                <p>
                    进入
                </p>
            </li>
        </ul>
        <div style="width: 6.7rem;padding-top:0.4rem;padding-bottom:0.4rem">
            <p style="font-size:0.25rem;color:#00ccff;text-align: center;">晓舟报告 <span style="color:#bfbfbf">|</span> 团队介绍</p>
            <p style="font-size:0.25rem;color:#bfbfbf;text-align: center;">晓舟报告官方网站©2019冀ICP备18023262号-4</p>
        </div>
    </div>
</template>
<style>
.ul{
    list-style-type: none;
    width: 6.7rem;
    border-top:1px solid #f0f0f0;
    border-bottom:1px solid #f0f0f0;
    padding-bottom: 0.35rem;
    padding-top: 0.2rem;
}
.ul img{
    width: 2rem;
    height: 1.3rem;
    float: left;
}
.ul div {
    width: 3.5rem;
    height: 1.3rem;
    padding-left: 0.3rem;
    float: left;
}
.ul > li > p{
    float: left;
    width: 1rem;
    height: 0.4rem;
    background-color: #00ccff;
    color: #ffffff;
    font-size: 0.26rem;
    text-align: center;
    border-radius: 0.25rem;
    margin-top: 0.52rem;
}
</style>